@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2+px;
}

* {
    font-size: 0;
}

body {
    position: relative;
}

//首页
.web {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .back {
        width: 100%;
        height: 100%;
        animation-name: back;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        img {
            width: 100%;
            height: 100%;
        }
        @keyframes back {
            0% {
                transform: scaleX(1);
            }
            50% {
                transform: scaleX(1.1);
            }
            100% {
                transform: scaleX(1);
            }
        }
    }
    .logo {
        width: p(200);
        height: p(60);
        position: absolute;
        top: 4%;
        right: 6%;
        img {
            width: 100%;
        }
    }
    .per {
        position: absolute;
        top: 15%;
        width: 100%;
        img {
            width: 100%;
        }
    }
    .title {
        width: 45%;
        position: absolute;
        top: 5%;
        left: 5%;
        transform: translateX(-115%);
        img {
            width: 100%;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(1, -0.52, .68, 1.93);
        }
        img:nth-child(1) {
            animation-name: title1;
            animation-duration: 1s;
            @keyframes title1 {
                0% {
                    transform: translateX(0);
                    opacity: 0;
                }
                100% {
                    transform: translateX(115%);
                    opacity: 1;
                }
            }
        }
        img:nth-child(2) {
            animation-name: title2;
            animation-duration: 1s;
            animation-delay: 500ms;
            @keyframes title2 {
                0% {
                    transform: translateX(0);
                    opacity: 0;
                }
                100% {
                    transform: translateX(115%);
                    opacity: 1;
                }
            }
        }
        img:nth-child(3) {
            animation-name: title3;
            animation-duration: 1s;
            animation-delay: 1s;
            @keyframes title3 {
                0% {
                    transform: translateX(0);
                    opacity: 0;
                }
                100% {
                    transform: translateX(115%);
                    opacity: 1;
                }
            }
        }
    }
    .start {
        width: 50%;
        position: absolute;
        bottom: 10%;
        left: 25%;
        animation-duration: 1.5s;
        animation-iteration-coun1t: infinite;
        img {
            width: 100%;
        }
    }
    .p {
        font-size: p(40);
        color: white;
        position: absolute;
        bottom: 2%;
        left: 38%;
    }
}

//游戏规则
.game1 {
    width: p(566);
    height: p(1100);
    background: rgba(26, 26, 26, 0.6);
    position: absolute;
    left: 12%;
    top: p(90);
    margin: 0 auto;
    transform: scale(0);
    transition: 1s;
    z-index: 3;
    .cai {
        font-size: p(60);
        color: #fff;
        text-align: right;
        margin-right: p(20);
    }
    h1 {
        font-size: p(42);
        color: #fff;
        text-align: center;
        font-weight: normal;
    }
    p:nth-child(3) {
        font-size: p(30);
        color: #fff;
        text-align: center;
        margin-top: p(60);
    }
    p:nth-child(4) {
        font-size: p(30);
        color: #fff;
        text-align: center;
        margin-top: p(120);
    }
    h1:nth-child(5) {
        font-size: p(42);
        color: #fff;
        text-align: center;
        margin-top: p(53);
        font-weight: normal;
    }
    ul {
        margin-top: p(65);
        padding-left: p(50);
        li {
            font-size: p(30);
            color: #fff;
            margin-bottom: p(25);
        }
    }
}

//加载页面
.load {
    width: 100%;
    height: 100%;
    background: url(../img/bj1.png);
    overflow: hidden;
    position: absolute;
    top: 0;
    display: none;
    .bam {
        background: url(../img/zhuzi.png);
        background-size: 100%;
        width: 70%;
        height: 100%;
        margin: 0 auto;
        img {
            width: 100%;
            height: 100%;
        }
        .shade {
            background: url(../img/jiazai.png) no-repeat;
            background-size: 100%;
            width: 18%;
            height: 100%;
            margin: 0 auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .logo {
        width: p(200);
        height: p(60);
        position: absolute;
        bottom: 8%;
        left: 39%;
        img {
            width: 100%;
        }
    }
    .ko {
        width: p(400);
        height: p(400);
        background: transparent;
        position: absolute;
        top: 40%;
        left: 25%;
        font-size: p(40);
        color: black;
        text-align: center;
        .ko_left {
            font-size: p(60);
            color: white;
        }
        .ko_right {
            width: p(100);
            height: p(100);
            font-size: p(40);
            margin: 0 auto;
            color: white;
        }
    }
}

//开始游戏页面
.game {
    width: 100%;
    height: 100%;
    background: url(../img/bj1.png);
    overflow: hidden;
    position: absolute;
    top: 0;
    display: none;
    .bam {
        background: url(../img/zhuzi.png);
        background-size: 100%;
        width: 70%;
        height: p(3000);
        margin: 0 auto;
        transition-duration: 1s;
        transform: translateY(p(-1668));
        //      animation-name:bam;
        //      animation-iteration-count: infinite;
        //      @keyframes bam{
        //          0%{transform: translateY(-334px);}
        //          100%{transform: translateY(0);}
        //      }
        img {
            width: 100%;
        }
        .shade {
            background: url(../img/jiazai.png) no-repeat;
            background-size: 100%;
            width: 18%;
            height: 100%;
            margin: 0 auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .per {
        text-align: center;
        width: p(600);
        height: p(1300);
        position: absolute;
        bottom: 0;
        left: 10%;
        background: url(../img/charector.png) no-repeat;
        background-position-x: p(-246);
        //      animation-name:you;
        //      animation-duration:1s;
        //      animation-iteration-count: infinite; 
        //      animation-timing-function:steps(1,start);
        //      animation-play-state:paused;
        //      @keyframes you{
        //          0%{background-position-x:0;}
        //          6.25%{background-position-x:-655px;}
        //          12.5%{background-position-x:-1185px;}
        //          18.75%{background-position-x:-1715px;}
        //          25%{background-position-x:-2245px;}
        //          31.25%{background-position-x:-2775px;}
        //          37.5%{background-position-x:-3305px;}
        //          43.75%{background-position-x:-3835px;}
        //          50%{background-position-x:-4365px;}
        //          56.25%{background-position-x:-4895px;}
        //          62.5%{background-position-x:-5425px;}
        //          68.75%{background-position-x:-5955px;}
        //          75%{background-position-x:-6485px;}
        //          81.25%{background-position-x:-7015px;}
        //          87.5%{background-position-x:-7545px;}
        //          93.75%{background-position-x:-8075px;}
        //          100%{background-position-x:-246;}
        //          }
    }
    .water {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        animation-name: water;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        @keyframes water {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(10px);
            }
            100% {
                transform: translateX(0);
            }
        }
    }
    .left {
        width: 40%;
        position: absolute;
        bottom: 8%;
        left: 10%;
        animation-name: left;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        @keyframes left {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        img {
            width: 100%;
        }
    }
    .right {
        width: 40%;
        position: absolute;
        bottom: 8%;
        right: 10%;
        animation-name: left;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        img {
            width: 100%;
        }
    }
    .p{
        position: absolute;
        bottom: 4%;
        left: 27%;
    }
    p{
        font-size: p(30);
        color: white;
    }
    .time {
        position: absolute;
        top: 3%;
        left: 45%;
        font-size: p(24);
    }
    .timer {
        width: p(104);
        height: p(44);
        text-align: center;
        position: absolute;
        top: 5%;
        left: 42%;
        font-size: p(40);
    }
    .h1 {
        width: p(400);
        height: p(200);
        position: absolute;
        top: 35%;
        left: 26%;
        text-align: center;
        color: yellow;
        font-size: p(120);
    }
}

//排行榜
.ranking {
    width: 100%;
    height: p(1334);
    background: url(../img/ba.png) no-repeat;
    overflow: hidden;
    display: none;
    position: absolute;
    top: 0;
    .xia {
        width: p(100);
        height: p(100);
        border-radius: 50%;
        overflow: hidden;
        margin-left: p(88);
        margin-top: p(190);
        img {
            width: 100%;
        }
    }
    .one {
        float: right;
        width: p(211);
        height: p(360);
        margin-right: p(268);
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .ming {
        position: absolute;
        top: p(200);
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        .qu {
            font-size: p(24);
            color: #ff4c22;
        }
        .ci {
            font-size: p(70);
            color: #ff4c22;
        }
    }
    .tim{
        position: absolute;
        right: p(170);
        top: p(210);
        text-align: center;
        .pp {
            font-size: p(30);
            color: #fff;
        }
        .king {
            font-size: p(25);
            color: #fff;
        }
    }
    h1 {
        width: p(520);
        height: p(90);
        background: #fff;
        border-radius: p(30);
        font-size: p(38);
        color: #ff4c22;
        line-height: p(90);
        text-align: center;
        margin: auto;
        margin-top: p(90);
    }
    .Rank {
        margin: auto;
        margin-top: p(20);
        overflow: auto;
        height: p(474);
        width: p(500);
        .two {
            position: relative;
            width: p(448);
            margin-bottom: p(10);
            left: 50%;
            transform: translateX(-50%);
            .two_left {
                width: p(86);
                height: p(86);
                font-size: p(40);
                color: #1a1a1a;
                text-align: center;
                line-height: p(70);
                background: #fff530;
                border: p(8) solid #fac855;
                border-radius: 50%;
            }
            .two_right {
                position: absolute;
                top: 0;
                left: p(60);
                width: p(388);
                height: p(88);
                border-radius: p(50);
                background: #fff;
                padding-top: p(7);
                padding-left: p(7);
                .amy {
                    width: p(73);
                    height: p(73);
                    border-radius: 50%;
                    overflow: hidden;
                    display: inline-block;
                    img {
                        width: 100%;
                    }
                }
                .two_right_center {
                    display: inline-block;
                    vertical-align: top;
                    width: p(255);
                    p {
                        font-size: p(18);
                        color: #ff4c22;
                        text-align: right;
                    }
                    span:nth-child(2) {
                        font-size: p(31);
                        color: #ff4c22;
                    }
                    span:nth-child(3) {
                        font-size: p(31);
                        color: #FF4C22;
                        float: right;
                    }
                }
            }
        }
    }
    .two_foor {
        position: fixed;
        bottom: p(140);
        font-size: 0;
        left: 20%;
        .two_foor_left {
            width: p(159);
            height: p(92);
            overflow: hidden;
            display: inline-block;
            img {
                width: 100%;
            }
        }
        .two_foor_right {
            width: p(315);
            height: p(92);
            overflow: hidden;
            display: inline-block;
            margin-left: p(38);
            img {
                width: 100%;
            }
        }
    }
}

//分享
.share {
    width: 100%;
    height: p(1334);
    background: rgba(50, 40, 17, 0.5);
    overflow: hidden;
    transform: scale(0);
    transition: 1s;
    transition-timing-function: cubic-bezier(.16, -0.23, .92, 1.38);
    position: absolute;
    top: 0;
    left: 0;
    .sha {
        width: p(273);
        height: p(169);
        font-size: p(45);
        text-align: center;
        float: right;
        margin-right: p(115);
        margin-top: p(115);
        color: #fff;
        border: p(10) solid #fff;
    }
}

//注册
.register {
    width: 100%;
    height: p(1334);
    background: url(../img/ba.png) no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
    transform-origin: right top;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(1, -0.05, .17, 1.19);
    .logol {
        width: p(157);
        height: p(64);
        float: right;
        margin-right: p(40);
        margin-top: p(50);
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    h1 {
        width: p(450);
        font-size: p(50);
        color: #fff;
        margin: auto;
        margin-top: p(206);
    }
    p:nth-child(3) {
        font-size: p(30);
        color: #fff;
        width: p(450);
        margin: auto;
        margin-top: p(94);
        margin-bottom: p(15);
    }
    input:nth-child(4) {
        width: p(454);
        height: p(65);
        margin-left: p(145);
        border: none;
        padding-left: p(10);
    }
    .ynazma {
        width: p(275);
        height: p(79);
        overflow: hidden;
        margin-left: p(145);
        margin-top: p(29);
        img {
            width: 100%;
        }
    }
    p:nth-child(6) {
        font-size: p(30);
        color: #fff;
        width: p(450);
        margin: auto;
        margin-top: p(50);
        margin-bottom: p(15);
    }
    input:nth-child(7) {
        width: p(300);
        height: p(65);
        margin-left: p(145);
        border: none;
        padding-left: p(10);
    }
    .dianji {
        width: p(449);
        height: p(129);
        overflow: hidden;
        margin-left: p(143);
        margin-top: p(40);
        img {
            width: 100%;
        }
    }
}

//抽奖
.draw {
    width: 100%;
    height: p(1334);
    background: url(../img/ba.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-1000px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(1, -0.05, .8, 1.59);
    .jinp {
             margin-left: p(60);
            position: relative;
            width: p(250);
            .draw_one {
                width: p(251);
                height: p(352);
                overflow: hidden;
                display: inline-block;
                vertical-align: middle;
                img {
                    width: 100%;
                }
            }
         .draw_foot{
                     width: p(120);
                    height: p(187);
                    overflow: hidden;
                    position: absolute;
                    top:42%;
                    left:50%;
                    transform: translateX(-50%);
                    img {
                        width: 100%;
                    }
            }
            p {
                display: inline-block;
                vertical-align: middle;
                position: absolute;
                top:p(188);
                font-size: p(40);
                color: #fff;
                width: p(268);
               left:p(300);
            }
    }
    ul {
            margin-left: p(60);
            margin-top: p(60);
            .baol {
                width: p(180);
                height: p(180);
                border: p(10) solid #dbdcdc;
                position: relative;
                background: #fffefd;
                margin-right: p(20);
                display: inline-block;
                margin-bottom: p(10);
                vertical-align: top;
                .bei {
                    width: p(96);
                    height: p(141);
                    overflow: hidden;
                    position: absolute;
                    top: p(-28);
                    left: p(28);
                    img {
                        width: 100%;
                    }
                }
                .beill {
                    width: p(136);
                    height: p(78);
                    overflow: hidden;
                    margin: auto;
                    margin-top: p(30);
                    img {
                        width: 100%;
                    }
                }
                .xiex {
                    width: p(76);
                    height: p(84);
                    overflow: hidden;
                    margin: auto;
                    margin-top: p(35);
                    img {
                        width: 100%;
                    }
                }
                .anl {
                    width: p(85);
                    height: p(73);
                    overflow: hidden;
                    margin: auto;
                    margin-top: p(10);
                    img {
                        width: 100%;
                    }
                }
                .huab {
                    width: p(169);
                    height: p(88);
                    overflow: hidden;
                    margin: auto;
                    margin-top: p(10);
                    img {
                        width: 100%;
                    }
                }
                .mao {
                    width: p(80);
                    height: p(108);
                    overflow: hidden;
                    margin: auto;
                    margin-top: p(10);
                    img {
                        width: 100%;
                    }
                }
                p {
                    position: absolute;
                    bottom: p(10);
                    left: p(10);
                    font-size: p(20);
                    color: #000000;
                }
            }
            .act {
                border: p(10) solid red;
                background: yellow;
            }
            .baol:nth-child(3) {
                width: p(180);
                height: p(180);
                margin-right: p(10);
                display: inline-block;
                margin-bottom: p(10);
                position: relative;
                .beil {
                    width: p(135);
                    height: p(130);
                    overflow: hidden;
                    position: absolute;
                    top: p(-15);
                    left: p(10);
                    img {
                        width: 100%;
                    }
                }
            }
            .ll {
                bottom: 95px;
                left: -199px;
            }
            .lis {
                bottom: 0px;
                left: 201px
            }
            .cayu {
                bottom: -95px;
                left: p(12);
            }
            .yun {
                right: -100px;
            }
            .yaob {
                left: -99px;
            }
            li:nth-child(5) {
                display: inline-block;
                margin-right: p(10);
                margin-bottom: p(10);
                .beilz {
                    width: p(180);
                    height: p(180);
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
                .zailai {
                    width: p(180);
                    height: p(180);
                    overflow: hidden;
                    display: none;
                    img {
                        width: 100%;
                    }
                }
                .laici{
                    width: p(180);
                    height: p(180);
                    overflow: hidden;
                    display: none;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    .anneng {
        width: p(157);
        height: p(64);
        overflow: hidden;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: p(60);
        img {
            width: 100%;
        }
    }
}

//扫码关注
.smgz {
    width: 100%;
    height: p(1334);
    background: url(../img/ba.png) no-repeat;
    position: relative;
    transform: scale(0);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(1, -0.45, .44, 1.71);
    position: absolute;
    left: 0;
    top: 0;
    .lk {
        margin: auto;
        width: p(453);
        height: p(1334);
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .ewm {
        position: absolute;
        top: 20%;
        left: 50%;
        height: p(1000);
        transform: translateX(-50%);
        h1 {
            font-size: p(33);
            margin-bottom: p(20);
            color: #ff4c22;
        }
        p {
            text-align: center;
            font-size: p(30);
            color: #fff;
            margin-bottom: p(10);
        }
        .sm {
            width: p(261);
            height: p(363);
            overflow: hidden;
            margin: auto;
            margin-top: p(100);
            img {
                width: 100%;
            }
        }
        .annen {
            width: p(157);
            height: p(64);
            overflow: hidden;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: p(60);
            img {
                width: 100%;
            }
        }
    }
}